<template>
    <div class="appraise">
        <div class="box">
        <div v-if="comments&&comments!=''"> 
            <div class="title" v-if="size&&goodsId">
                全部评价
                <div @click="toMore" class="all">查看全部<img src="./image/右.png" /></div>
            </div>
            <div class="item" v-for="item in comments" :key="item.id">
                <div class="headTop">
                     <div class="user"><img :src="item.avatar"><span>{{item.name?item.name:''}}</span></div>
                    <div id="dateInfo" v-if="item.time">{{item.time.split(' ')[0]}}</div>
                    <div class="info" v-if="item.content">{{item.content}}</div>
                    <div class="img" v-if="item.img">
                        <img v-for="(itemImg,i) in item.img.split(',')" :key="i" :src="imgH+itemImg" />
                    </div>
                </div>
            </div>
        </div>
        <div class="title" v-else>暂无评价</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        props:{
            comments:{
                type:Array,
                default:()=>{}
            },
            size:{
                type: Boolean,
                default:false
            },
            goodsId:{
                type:Number,
                default:()=>{}
            }
        },
        data() {
            return {
                imgH: process.env.VUE_APP_IMG_DOMAIN
            }
        },
        methods:{
            toMore(){
                this.$router.push({
                    path:'/appraise',
                    query:{id:this.goodsId}
                })
                console.log(this.comments)
            }
        }
    }
</script>

<style scoped lang="stylus">
    .appraise
        background-color: #fff
        padding 0 15px
        margin-bottom 10px
        .box
            margin-left 0.2rem
            .title
                padding 12px 0
                height: 20px;
                font-size: 0.4rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: bold;
                color: #303333;
                line-height: 20px;
                display flex
                flex 1
                justify-content space-between
                .all 
                    display flex
                    align-items center
                    color #00D6C0
                    font-size 13px
                    img     
                        display inline-block
                        width 0.2933rem
                        height 0.2933rem
            .headTop
                .user
                    display flex
                    align-items center
                    margin-bottom 0.266rem
                    img
                        display inline-block
                        margin-right 0.24rem
                        border-radius 50%
                        width 0.64rem
                        overflow hidden
                        height 0.64rem
                    span
                        color #333
                        font-size 0.3466rem
                #dateInfo
                    color #999
                    font-size 0.32rem
                .info   
                     color #333
                     font-size 0.3466rem
                     line-height 1.5
                     white-space: normal;
                     overflow: hidden;
                     text-overflow: ellipsis;
                     display: -webkit-box;
                     -webkit-box-orient: vertical;
                     -webkit-line-clamp: 2;
                     margin 0.266rem 0
                .img
                    display flex
                    justify-content flex-end
                    padding-bottom 0.266rem
                    img
                        width 2.8rem
                        height 2.8rem
                        overflow hidden
                .avtar
                    width: 20px
                    height: 20px
                    img
                        width: 20px
                        height: 20px
                        border-radius 50%
                .name
                    height 20px
                    flex 1
                    color #303333
                    font-size 12px
                    line-height: 20px;
                    margin-left 5px
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-break: break-all;
                .time
                    margin-left 5px
                    font-size 10px
                    color: #909999;
</style>